<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body,
			html {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				background: url(img/ifame-bg.jpg);
			}

			.ifame-main {
				width: 100%;
				height: 100%;
			}

			.swiper-container {
				width: 100%;
				height: 100%;
			}

			.ifram-btm {
				width: 80%;
				height: 100%;
				border: none;
				margin: 0;
				padding: 0;
				margin-left: 10%;
			}

			.swiper-container-horizontal>.swiper-pagination-bullets,
			.swiper-pagination-custom,
			.swiper-pagination-fraction {
				bottom: 60px;
			}

			.swiper-pagination-bullet {
				width: 50px;
				height: 5px;
				border-radius: 2px;
				background: white;
				opacity: 0.4
			}

			.my-bullet-active {
				background: white;
				opacity: 0.8
			}
			.iframe-title{
				width: 100%;
				position: absolute;
				background: linear-gradient(#215aaa, #3b91f3) no-repeat;
				height: 40px;
				line-height: 40px;
				color: #FFF;
				z-index: 999;
			}
			.iframe-title .logo{
				width: 30px;
				height: 30px;
				vertical-align: middle;
				display: inline-block;
				padding-left: 40px;
			}
			.pro-name{
				font-size: 18px;
			}
			.iframe-title .line{
				color: #4d90e1;
				display: inline-block;
				border-right: 1px solid #aac9f4;
				padding: 0px 2px 0px 2px ;
				height: 15px;
				line-height: 40px;
				vertical-align: middle;
			}
			.iframe-title .pro-desc{
				font-size: 14px;
				padding-left: 3px;
			}
			.license{
				width: 100%;
				position: absolute;
				background: #2d74cc;
				height: 30px;
				line-height: 30px;
				color: #FFF;
				z-index: 999;
				bottom: 0;
				text-align: center;
				font-size: 14px;
			}
			.right-info{
				float: right;
				margin-right: 100px;
				line-height: 40px;
			}
			.right-info .clock{
				width: 15px;
				vertical-align: middle;
			}
			
			.right-info .user-name{
				padding-left: 10px;
				vertical-align: middle;
				min-width: 50px;
				background: none;
				color: #FFF;
				border: none;
				appearance:none;
				-moz-appearance:none;
				-webkit-appearance:none;
			}
			.right-info .drop-down{
				padding-left: 10px;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="ifame-main">
			<div class="iframe-title">
				<img class="logo" src="img/logo.png" >
				<span class="pro-name">巨山农场鲜活农产品自动化平台</span>
				<span class="line"></span>
				<span class="pro-desc">温室</span>
				<div class="right-info">
				    <a>首页</a>
				    <a>我的工作</a>

				     <a>全屏</a>
					<img class="clock" src="img/clock.png" >
					<select id="user-select" class="user-name">
						<option value="ADMIN2">退出</option>
					</select>
					<img class="drop-down" src="img/dropdown.png" >
				</div>
			</div>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<iframe class="ifram-btm" src="wenshi-1.html"></iframe>
					</div>
					<div class="swiper-slide">
						<iframe class="ifram-btm" src="wenshi-2.html"></iframe>
					</div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
			</div>
			<div class="license">
				©Copyright (c) [[${copyrightYear}]] 北京市巨山农场农业信息化管理平台
			</div>
		</div>
		<script type="text/javascript">
			$("#user-select").change(function(){
				console.log($(this).children('option:selected').val())
			})
			var mySwiper = new Swiper('.swiper-container', {
				direction: 'horizontal', // 垂直切换选项
				loop: true, // 循环模式选项
				autoplay: {
					delay: 6000,
					stopOnLastSlide: false,
					disableOnInteraction: true,
				},
				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
					bulletActiveClass: 'my-bullet-active',
					clickable: true,
				},

				// 如果需要前进后退按钮
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},

				// 如果需要滚动条
				scrollbar: {
					el: '.swiper-scrollbar',
				},
			})
		</script>
	</body>
</html>
